<template>
  <div id="invReagentDiv">
    <Breadcrumb content="商品维护" />
    <div class="bodyContent">
      <Splitpanes>
        <Pane size="50">
          <vxe-form :data="searchReaForm" class="searchform form-input-m">
            <vxe-form-item title="快速查询">
              <vxe-input style="width: 180px" v-model="searchReaForm.searchValue" type="search" clearable
                class="vxeInputSearch" placeholder="关键字查询" @clear="findInvReagentList" @keyup="keyupEnter"
                @search-click="findInvReagentList()"></vxe-input>
            </vxe-form-item>
            <vxe-form-item title="商品分类">
              <el-select v-model="searchReaForm.categorizeName" placeholder="请选择商品分类" ref="selectSearCateRef" clearable
                @clear="clearSearCate()" style="width: 180px">
                <el-option hidden :value="searchReaForm.categorizeId ? searchReaForm.categorizeId : ''"
                  :label="searchReaForm.categorizeName"></el-option>
                <el-tree filterable :data="categorizeTree" :props="defaultProps" :expand-on-click-node="false"
                  :default-expand-all="true" @node-click="handleSearCateClick" ref="searCateTreeRef" highlight-current
                  node-key="id" class="tools-tree"></el-tree>
              </el-select>
            </vxe-form-item>
            <vxe-form-item title="批号管理">
              <vxe-radio-group v-model="searchReaForm.isBatchNumMgt" @change="radioBatchNumMgtChange">
                <vxe-radio :label="null" content="全部"></vxe-radio>
                <vxe-radio :label="true" content="启用"></vxe-radio>
                <vxe-radio :label="false" content="不启用"></vxe-radio>
              </vxe-radio-group>
            </vxe-form-item>
            <vxe-form-item title="条码管理">
              <vxe-radio-group v-model="searchReaForm.isSingleBarcode" @change="radioSingleBarcodeChange">
                <vxe-radio :label="null" content="全部商品"></vxe-radio>
                <vxe-radio :label="true" content="单品条码"></vxe-radio>
                <vxe-radio :label="false" content="非单品条码"></vxe-radio>
              </vxe-radio-group>
            </vxe-form-item>
            <vxe-form-item title="供应商">
              <vxe-select v-model="searchReaForm.vendorNo" :filterable="true" @change="vendorNoChangeEvent" clearable
                transfer>
                <vxe-option v-for="instr in invSupplierList" :key="instr.id" :value="instr.supplierCode"
                  :label="instr.supplierName"></vxe-option>
              </vxe-select>
            </vxe-form-item>
            <vxe-form-item title="">
              <vxe-checkbox v-model="searchReaForm.isSingle" size="small" content="仅显示个采" :checked-value="true"
                :unchecked-value="false" @change="isSingleChange"></vxe-checkbox>
            </vxe-form-item>

            <vxe-form-item>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading"
                @click="findInvReagentList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建"
                @click="addInvReagentDialog()"></vxe-button>
              <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除"
                @click="deleteInvReagent"></vxe-button>
            </vxe-form-item>
          </vxe-form>
          <div class="tableBox">
            <vxe-table ref="invReagentTableRef" class="mytable-scrollbar" border align="center" height="auto"
              :data="invReagentList" :loading="tloading" @current-change="invReagentRowClick"
              :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable
              show-overflow keep-source>
              <vxe-column type="checkbox" width="30"></vxe-column>
              <vxe-column field="reaNo" title="代码" width="80">
                <template #default="{ row }">
                  <span>{{ row.reaNo }}</span>
                </template>
              </vxe-column>
              <vxe-column field="reaNa" title="名称" width="200">
                <template #default="{ row }">
                  <span>{{ row.reaNa }}</span>
                </template>
              </vxe-column>
              <vxe-column field="shortName" title="简称" width="100">
                <template #default="{ row }">
                  <span>{{ row.shortName }}</span>
                </template>
              </vxe-column>
              <vxe-column field="inputCode" title="助记符" width="100">
                <template #default="{ row }">
                  <span>{{ row.inputCode }}</span>
                </template>
              </vxe-column>
              <vxe-column field="specModel" title="规格型号" width="100"> </vxe-column>
              <vxe-column field="categorizeName" title="商品分类" width="100"> </vxe-column>

              <vxe-column field="vendorName" title="供应商" width="100"> </vxe-column>
              <vxe-column field="manuName" title="生产商" width="120"> </vxe-column>
              <vxe-column field="certName" title="证书" width="100"></vxe-column>
              <vxe-column field="email" title="电子邮件" width="100">
                <template #default="{ row }">
                  <span>{{ row.email }}</span>
                </template></vxe-column>
              <vxe-column field="isEnable" title="是否启用" width="80">
                <template #default="{ row }">
                  <span>{{ row.isEnable ? '是' : '否' }}</span>
                </template>
              </vxe-column>
              <vxe-column field="remark" title="说明" width="300">
                <template #default="{ row }">
                  <span>{{ row.remark }}</span>
                </template>
              </vxe-column>
              <vxe-column field="seq" title="顺序" width="50">
                <template #default="{ row }">
                  <span>{{ row.seq }}</span>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="50">
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="基础信息" name="first">
              <Splitpanes horizontal class="horizontalLine">
                <Pane size="80">
                  <div class="saveBtn">
                    <vxe-button type="text" class="button-blue" @click="saveInvReagent('reagentFormRef')"
                      icon="vxe-icon-save" content="保存"></vxe-button>
                  </div>
                  <el-form ref="reagentFormRef" :model="reagentForm" :rules="reagentFormRule" label-width="100px"
                    inline-message>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item prop="reaNo" label="商品编号">
                          <el-input type="text" v-model="reagentForm.reaNo" placeholder="请输入商品编号"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="isPrintBarWhenIn">
                          <el-checkbox v-model="reagentForm.isPrintBarWhenIn">收货后自动打印批号条码</el-checkbox>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="categorizeId" label="商品分类">
                          <el-select v-model="reagentForm.categorizeName" placeholder="请选择商品分类" ref="selectOrgRef"
                            style="width: 180px">
                            <el-option hidden :value="reagentForm.categorizeId ? reagentForm.categorizeId : ''"
                              :label="reagentForm.categorizeName"></el-option>
                            <el-tree filterable :data="categorizeTree" :props="defaultProps" :expand-on-click-node="false"
                              :default-expand-all="true" @node-click="handleTypeNodeClick" highlight-current
                              ref="orgTreeRef" node-key="id" class="tools-tree"></el-tree>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="reaNa" label="商品名称">
                          <el-input type="text" v-model="reagentForm.reaNa" placeholder="请输入商品名称"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="shortName" label="商品简称">
                          <el-input type="text" v-model="reagentForm.shortName" @blur="getBdsResult()"
                            placeholder="请输入商品简称"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="inputCode" label="助记符">
                          <el-input type="text" v-model="reagentForm.inputCode" placeholder="请输入助记符" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="specModel" label="规格型号">
                          <el-input type="text" v-model="reagentForm.specModel" placeholder="请输入规格型号"
                            clearable></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="maxStock" label="最大库存">
                          <el-input-number v-model="reagentForm.maxStock" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="maxTemp" label="最高温度" class="input-s">
                          <el-input-number v-model="reagentForm.maxTemp" :min="0.0" :precision="2"
                            :max="1000"></el-input-number>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="miniUnit" label="最小单位">
                          <el-select v-model="reagentForm.miniUnit" placeholder="请选择" @change="miniUnitChangeEvent">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="miniStock" label="最小库存">
                          <el-input-number v-model="reagentForm.miniStock" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="minTemp" label="最低温度" class="input-s">
                          <el-input-number v-model="reagentForm.minTemp" :min="0.0" :precision="2"
                            :max="1000"></el-input-number>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="proUnit" label="采购/收货单位">
                          <el-select v-model="reagentForm.proUnit" placeholder="请选择">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="proUnitRatio" label="单位换算系数">
                          <el-input-number v-model="reagentForm.proUnitRatio" :min="0"
                            :max="1000" />{{ reagentForm.miniUnit }}
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="isBatchNumMgt">
                          <el-checkbox v-model="reagentForm.isBatchNumMgt">启用批号管理</el-checkbox>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="stockUnit" label="库存单位">
                          <el-select v-model="reagentForm.stockUnit" placeholder="请选择">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="stockUnitRatio" label="单位换算系数">
                          <el-input-number v-model="reagentForm.stockUnitRatio" :min="0"
                            :max="1000" />{{ reagentForm.miniUnit }}
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="isBatchChangeTip">
                          <el-checkbox v-model="reagentForm.isBatchChangeTip">更换批号提醒</el-checkbox>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="outUnit" label="销售/出库单位">
                          <el-select v-model="reagentForm.outUnit" placeholder="请选择">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="outUnitRatio" label="单位换算系数">
                          <el-input-number v-model="reagentForm.outUnitRatio" :min="0"
                            :max="1000" />{{ reagentForm.miniUnit }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="isSingleBarcode">
                          <el-checkbox v-model="reagentForm.isSingleBarcode">启用单品条码</el-checkbox>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="useUnit" label="开瓶单位">
                          <el-select v-model="reagentForm.useUnit" placeholder="请选择">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="useUnitRatio" label="单位换算系数">
                          <el-input-number v-model="reagentForm.useUnitRatio" :min="0"
                            :max="1000" />{{ reagentForm.miniUnit }}
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="isManageUse">
                          <el-checkbox v-model="reagentForm.isManageUse">是否开瓶管理</el-checkbox>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="unit" label="开瓶单位">
                          <el-select v-model="reagentForm.unit" placeholder="请选择">
                            <el-option v-for="item in reagentUnitList" :key="item.code" :label="item.name"
                              :value="item.code" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="unitRatio" label="单位换算系数">
                          <el-input-number v-model="reagentForm.unitRatio" :min="0" :max="1000" />{{ reagentForm.miniUnit }}
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="isSingle">
                          <el-checkbox v-model="reagentForm.isSingle">是否个采</el-checkbox>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="bidNo" label="中标号">
                          <el-input type="text" v-model="reagentForm.bidNo" placeholder="请输入中标号" clearable></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="certNo" label="证书编号">
                          <VxePulldownSelectionWithNa style="width: 100%" :url="'/inv/cert/findInvCertList'"
                            @confirmClick="SelectRowClick" :tableColumn="[
                              { type: 'seq', title: '#', width: '30px' },
                              { field: 'certName', title: '名称' },
                              { field: 'certCode', title: '编码' }
                            ]" :aimKeys="[
  { aimKey: 'certName', rowKey: 'certName' },
  { aimKey: 'certNo', rowKey: 'certCode' }
]" :displayTexts="['certName']"
                            :displayTextObj="reagentForm.certName ? reagentForm.certName : ''" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="isOutinRecord">
                          <el-checkbox v-model="reagentForm.isOutinRecord">存在出入库记录</el-checkbox>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="barcode" label="条码号">
                          <el-input type="text" v-model="reagentForm.barcode" placeholder="请输入条码号" clearable></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="externalNo" label="外部代码编号">
                          <el-input type="text" v-model="reagentForm.externalNo" placeholder="请输入外部代码编号"
                            clearable></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="isEnable">
                          <el-checkbox v-model="reagentForm.isEnable">是否启用</el-checkbox>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="maxUse" label="最大出库数量">
                          <el-input-number v-model="reagentForm.maxUse" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="maxOut" label="最大出库数">
                          <el-input-number v-model="reagentForm.maxOut" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="useExpirDay" label="开瓶有效期">
                          <el-input-number v-model="reagentForm.useExpirDay" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="expirDay" label="有效期">
                          <el-input-number v-model="reagentForm.expirDay" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="expir1Warning" label="一级效期预警">
                          <el-input-number v-model="reagentForm.expir1Warning" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="expir2Warning" label="二级效期预警">
                          <el-input-number v-model="reagentForm.expir2Warning" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="miniStockWarning" label="低储预警库存">
                          <el-input-number v-model="reagentForm.miniStockWarning" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="safeStock" label="安全库存">
                          <el-input-number v-model="reagentForm.safeStock" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="stock" label="常备库存">
                          <el-input-number v-model="reagentForm.stock" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="allowUseTimes" label="允许开瓶次数">
                          <el-input-number v-model="reagentForm.allowUseTimes" :min="0" :max="1000" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item prop="costPrice" label="最后进货价格" class="input-s">
                          <el-input-number v-model="reagentForm.costPrice" :min="0.0" :precision="2"
                            :max="1000"></el-input-number>
                        </el-form-item>
                      </el-col>

                      <el-form-item prop="seq" label="排序" class="input-s">
                        <el-input-number v-model="reagentForm.seq" :min="0" :max="100" label="请输入顺序号"></el-input-number>
                      </el-form-item>

                      <el-col :span="12">
                        <el-form-item prop="vendorNo" label="供应商">
                          <VxePulldownSelectionWithNa style="width: 100%" :url="'/lis/inv/supplier/findInvSupplierList'"
                            @confirmClick="SelectRowClick" :tableColumn="[
                              { type: 'seq', title: '#', width: '30px' },
                              { field: 'supplierName', title: '名称' },
                              { field: 'supplierCode', title: '编码' }
                            ]" :aimKeys="[
  { aimKey: 'vendorName', rowKey: 'supplierName' },
  { aimKey: 'vendorNo', rowKey: 'supplierCode' }
]" :displayTexts="['vendorName']"
                            :displayTextObj="reagentForm.vendorName ? reagentForm.vendorName : ''" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="vendorNo" label="生产商">
                          <VxePulldownSelectionWithNa style="width: 100%"
                            :url="'/lis/inv/manufacturer/findInvManufacturerList'" @confirmClick="SelectRowClick"
                            :tableColumn="[
                              { type: 'seq', title: '#', width: '30px' },
                              { field: 'manuName', title: '名称' },
                              { field: 'manuCode', title: '编码' }
                            ]" :aimKeys="[
  { aimKey: 'manuName', rowKey: 'manuName' },
  { aimKey: 'manufacturerNo', rowKey: 'manuCode' }
]" :displayTexts="['manuName']"
                            :displayTextObj="reagentForm.manuName ? reagentForm.manuName : ''" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item prop="stockCondition" label="储存条件">
                          <el-input type="text" v-model="reagentForm.stockCondition" placeholder="请输入储存条件"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="matchCondition" label="match条件">
                          <el-input type="text" v-model="reagentForm.matchCondition" placeholder="请输入match条件"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="savePos" label="存储位置">
                          <el-input type="text" v-model="reagentForm.savePos" placeholder="请输入存储位置"></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item prop="remark" label="备注">
                          <el-input type="textarea" v-model="reagentForm.remark" placeholder="请输入说明"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </Pane>
                <Pane size="20">
                  <div data-v-939b102f=""
                    class="vxe-table vxe-table--render-default tid_10 border--full size--mini row--highlight is--header is--animat is--scroll-x mytable-scrollbar">
                    <div class="vxe-table-slots">
                      <div data-v-939b102f=""></div>
                      <div data-v-939b102f=""></div>
                      <div data-v-939b102f=""></div>
                      <div data-v-939b102f=""></div>
                      <div data-v-939b102f=""></div>
                    </div>
                    <div class="vxe-table--render-wrapper">
                      <div class="vxe-table--main-wrapper">
                        <div class="vxe-table--header-wrapper body--wrapper" xid="10">
                          <div class="vxe-body--x-space"></div>
                          <table class="vxe-table--header" xid="10" cellspacing="0" cellpadding="0" border="0">
                            <colgroup>
                              <col name="col_11" style="width: 100px;">
                              <col name="col_12" style="width: 100px;">
                              <col name="col_13" style="width: 100px;">
                              <col name="col_14" style="width: 100px;">
                              <col name="col_15" style="width: 100px;">

                            </colgroup>
                            <thead>
                              <tr class="vxe-header--row">
                                <th class="vxe-header--column col_11 col--center" colid="col_11">
                                  <div class="vxe-cell"><span class="vxe-cell--title">业务</span></div>
                                  <div class="vxe-resizable"></div>
                                </th>
                                <th class="vxe-header--column col_12 col--center" colid="col_12">
                                  <div class="vxe-cell"><span class="vxe-cell--title">换算单位</span></div>
                                  <div class="vxe-resizable"></div>
                                </th>
                                <th class="vxe-header--column col_13 col--center" colid="col_13">
                                  <div class="vxe-cell"><span class="vxe-cell--title">换算符合</span></div>
                                  <div class="vxe-resizable"></div>
                                </th>
                                <th class="vxe-header--column col_14 col--center" colid="col_14">
                                  <div class="vxe-cell"><span class="vxe-cell--title">换算系数</span></div>
                                  <div class="vxe-resizable"></div>
                                </th>
                                <th class="vxe-header--column col_15 col--center" colid="col_15">
                                  <div class="vxe-cell"><span class="vxe-cell--title">最小单位</span></div>
                                  <div class="vxe-resizable"></div>
                                </th>
                              </tr>
                            </thead>
                          </table>
                          <div class="vxe-table--header-border-line"></div>
                        </div>
                        <div class="vxe-table--body-wrapper body--wrapper" xid="10"
                          style="height: 791px; min-height: 118px;">
                          <div class="vxe-body--x-space"></div>
                          <div class="vxe-body--y-space"></div>
                          <table class="vxe-table--body" xid="10" cellspacing="0" cellpadding="0" border="0">
                            <colgroup>
                              <col name="col_11" style="width: 100px;">
                              <col name="col_12" style="width: 100px;">
                              <col name="col_13" style="width: 100px;">
                              <col name="col_14" style="width: 100px;">
                              <col name="col_15" style="width: 100px;">
                            </colgroup>
                            <tbody>
                              <tr class="vxe-body--row" rowid="row_56">
                                <td class="vxe-body--column col_11 col--center col--ellipsis" colid="col_11">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">采购/收货单位</span></div>
                                </td>
                                <td class="vxe-body--column col_12 col--center col--ellipsis" colid="col_12">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.proUnit }}</span></div>
                                </td>
                                <td class="vxe-body--column col_13 col--center col--ellipsis" colid="col_13">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span data-v-939b102f="">=</span>
                                  </div>
                                </td>
                                <td class="vxe-body--column col_14 col--center col--ellipsis" colid="col_14">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.proUnitRatio }}</span></div>
                                </td>
                                <td class="vxe-body--column col_15 col--center col--ellipsis" colid="col_15">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.miniUnit }}</span></div>
                                </td>
                              </tr>
                              <tr class="vxe-body--row" rowid="row_57">
                                <td class="vxe-body--column col_11 col--center col--ellipsis" colid="col_11">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">库存单位</span></div>
                                </td>
                                <td class="vxe-body--column col_12 col--center col--ellipsis" colid="col_12">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.stockUnit }}</span></div>
                                </td>
                                <td class="vxe-body--column col_13 col--center col--ellipsis" colid="col_13">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span data-v-939b102f="">=</span>
                                  </div>
                                </td>
                                <td class="vxe-body--column col_14 col--center col--ellipsis" colid="col_14">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.stockUnitRatio }}</span></div>
                                </td>
                                <td class="vxe-body--column col_15 col--center col--ellipsis" colid="col_15">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.miniUnit }}</span></div>
                                </td>
                              </tr>
                              <tr class="vxe-body--row" rowid="row_58">
                                <td class="vxe-body--column col_11 col--center col--ellipsis" colid="col_11">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">销售/出库单位</span></div>
                                </td>
                                <td class="vxe-body--column col_12 col--center col--ellipsis" colid="col_12">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.outUnit }}</span></div>
                                </td>
                                <td class="vxe-body--column col_13 col--center col--ellipsis" colid="col_13">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span data-v-939b102f="">=</span>
                                  </div>
                                </td>
                                <td class="vxe-body--column col_14 col--center col--ellipsis" colid="col_14">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.outUnitRatio }}</span></div>
                                </td>
                                <td class="vxe-body--column col_15 col--center col--ellipsis" colid="col_15">
                                  <div class="vxe-cell c--tooltip" style="width: 98px;"><span
                                      data-v-939b102f="">{{ reagentForm.miniUnit }}</span></div>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                        </div><!---->
                      </div>
                      <div class="vxe-table--fixed-wrapper"><!----><!----></div>
                    </div>

                    <div class="vxe-table--border-line"></div>
                    <div class="vxe-table--resizable-bar" style="padding-bottom: 9px;"></div>

                  </div>
                </Pane>
              </Splitpanes>
            </el-tab-pane>
            <!-- <el-tab-pane label="生产商" name="second" :disabled="isEmpty(reagentForm.id)"> </el-tab-pane>
            <el-tab-pane label="试剂仓库" name="thrid" :disabled="isEmpty(reagentForm.id)"> </el-tab-pane> -->
            <el-tab-pane label="证书" name="fourh" :disabled="isEmpty(reagentForm.id)">
              <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="添加"
                @click="addDialog()"></vxe-button>
              <vxe-table ref="instrTableRef" align="center" border class="mytable-scrollbar rptGroupInstrTable"
                :data="certList" :loading="lloading" show-overflow keep-source>
                <vxe-column type="seq" title="序号" width="40"></vxe-column>
                <vxe-column field="certCode" title="证书编码"></vxe-column>
                <vxe-column field="certName" title="证书名称"></vxe-column>
                <vxe-column field="certType" title="证书类型"></vxe-column>
                <vxe-column field="inputCode" title="输入码"></vxe-column>
                <vxe-column field="enableDate" title="生效日期"></vxe-column>
                <vxe-column field="stopDate" title="过期日期"></vxe-column>
                <vxe-column title="操作" fixed="right">
                  <template #default="{ row }">
                    <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click="deleteCert(row)"
                      class="spanIcon"></vxe-button>
                  </template>
                </vxe-column>
              </vxe-table>
            </el-tab-pane>
          </el-tabs>

          <el-dialog title="证书" :show-close="false" v-model="showDialog" append-to-body width="1000px"
            :close-on-click-modal="false">
            <vxe-toolbar perfect>
              <template #buttons>
                <vxe-input style="width: 130px" v-model="searchForm.searchValue" type="search" clearable
                  class="vxeInputSearch" placeholder="关键字查询" @clear="getCert" @keyup="keyupInsrEnter"
                  @search-click="getCert()"></vxe-input>
                <vxe-button type="text" class="button-blue" content="查询" :loading="lloading"
                  @click="getCert"></vxe-button>
              </template>
            </vxe-toolbar>
            <div class="tableBody">
              <vxe-table ref="certTableRef" class="mytable-scrollbar" border="inner" align="left" height="500"
                :data="certTableList" :loading="lloading" :column-config="{ resizable: true }" resizable show-overflow
                keep-source>
                <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                <vxe-column type="seq" title="序号" width="30"></vxe-column>
                <vxe-column field="certCode" title="证书编码"></vxe-column>
                <vxe-column field="certName" title="证书名称"></vxe-column>
                <vxe-column field="certType" title="证书类型"></vxe-column>
                <vxe-column field="inputCode" title="输入码"></vxe-column>
                <vxe-column field="enableDate" title="生效日期"></vxe-column>
                <vxe-column field="stopDate" title="过期日期"></vxe-column>
              </vxe-table>
            </div>
            <div class="dialog-footer flex right justify-end" style="margin-top: 10px;">
              <el-button type="primary" @click="saveBacthInstr()">确定</el-button>
              <el-button @click="closeDialog()">取消</el-button>
            </div>
          </el-dialog>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';

let categorizeTree: any = reactive([]);
let invSupplierList: any = reactive([]);
let invReagentList: any = reactive([]);
let reagentUnitList: any = reactive([]);

let tloading = ref(false); //刷新加载状态
let defaultProps = {
  children: 'children',
  label: 'categorizeName'
};

let showDialog = ref(false);
let lloading = ref(false); //加载状态
let certList: any = reactive([]); //证书列表数据
let certTableList: any = reactive([]); //弹出框List
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: 50,
  totalResult: 0
});
let searchForm = reactive({
  searchValue: ''
});

let reagentForm: any = reactive({
  id: null,
  categorizeId: '',
  categorizeCode: '',
  reaGroupNo: '',
  reaNo: '',
  reaNa: '',
  shortName: '',
  specModel: '',
  unit: '',
  dyncPrice: null,
  reaClassNo: '',
  reaCategoryNo: '',
  reacategoryNo1: '',
  isBatchNumMgt: false,
  vendorNo: '',
  vendorName: '',
  manufacturerNo: '',
  manuName: '',
  isEnable: true,
  miniStock: null,
  miniStockWarning: null,
  safeStock: null,
  maxStock: null,
  stock: null,
  allowUseTimes: null,
  costPrice: null,
  inputCode: '',
  miniUnit: '',
  stockUnit: '',
  outUnit: '',
  useUnit: '',
  proUnit: '',
  unitRatio: null,
  proUnitRatio: null,
  stockUnitRatio: null,
  outUnitRatio: null,
  useUnitRatio: null,
  isPrintBarWhenIn: false,
  isBatchChangeTip: false,
  maxTemp: null,
  minTemp: null,
  stockCondition: '',
  barcode: '',
  isSingleBarcode: false,
  isManageUse: false,
  useExpirDay: null,
  expirDay: null,
  expir1Warning: null,
  expir2Warning: null,
  maxUse: null,
  isOutinRecord: false,
  certNo: '',
  certName: '',
  remark: '',
  bidNo: '',
  externalNo: '',
  maxOut: null,
  isSingle: false,
  savePos: '',
  matchCondition: '',
  seq: 1
});

// 表单校验
let reagentFormRule = {
  reaNa: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ],
  reaNo: [
    {
      required: true,
      message: '请输入编号',
      trigger: 'blur'
    }
  ],
  shortName: [
    {
      required: true,
      message: '请输入简称',
      trigger: 'blur'
    }
  ],
  categorizeId: [
    {
      required: true,
      message: '请输入商品分类',
      trigger: 'blur'
    }
  ],
  proUnit: [
    {
      required: true,
      message: '请输入采购单位',
      trigger: 'blur'
    }
  ],
  proUnitRatio: [
    {
      required: true,
      message: '请输入采购单位换算系数',
      trigger: 'blur'
    }
  ],
  stockUnit: [
    {
      required: true,
      message: '请输入库存单位',
      trigger: 'blur'
    }
  ],
  stockUnitRatio: [
    {
      required: true,
      message: '请输入库存单位换算系数',
      trigger: 'blur'
    }
  ]
};
let activeName = ref('first');

// 全局变量定义区 ==========

let searchReaForm = reactive({
  searchValue: '',
  categorizeId: '',
  categorizeCode: '',
  categorizeName: '',
  isBatchNumMgt: null,
  isSingleBarcode: null,
  vendorNo: '',
  isSingle: false
});

// 方法定义区 =============
// 页面加载时更新组织机构列表(左侧)
onMounted(() => {
  findReagentCategorizeList();
  findInvReagentList();
  findInvSupplierList();
  getDictItemsList(); //批量获取字典
});

//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['reagentUnit'];

  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const horizontalType = dictTreeTypeItems.data.find((item: any) => item.code === 'reagentUnit');
  reagentUnitList.push(...horizontalType.detailDataList);
}

function findReagentCategorizeList() {
  const url = '/lis/inv/reagentCategorize/findReagentCategorizeTree';
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      categorizeTree.push(...res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取机构列表失败',VxeNotifyType.error)
    });
}
function findInvSupplierList() {
  const url = '/lis/inv/supplier/findInvSupplierList';
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      invSupplierList.push(...res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取机构列表失败',VxeNotifyType.error)
    });
}

let sltInvReagent: any = ref({});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findInvReagentList();
  }
}

function findInvReagentList() {
  tloading.value = true;
  invReagentList.length = 0; //放入数据前清空数据
  const url = '/lis/inv/invReagent/findInvReagentList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchReaForm.searchValue,
        categorizeId: searchReaForm.categorizeId,
        isBatchNumMgt: searchReaForm.isBatchNumMgt,
        isSingleBarcode: searchReaForm.isSingleBarcode,
        vendorNo: searchReaForm.vendorNo,
        isSingle: searchReaForm.isSingle
      }
    })
    .then((res: any) => {
      invReagentList.push(...res.data);
      if (invReagentList.length == 0) {
        clearInvReagentForm();
        setCurOrgTreeNode(reagentForm.categorizeId);
      } else {
        const kn = invReagentList.find((k: any) => k.id == sltInvReagent.value.id);
        if (isEmpty(kn)) {
          invReagentRowClick({ row: invReagentList[0] }); //默认选中第一条数据
        } else {
          invReagentRowClick({ row: kn }); //默认选中第一条数据
        }
      }

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

// 点击质控品维护表格当前行触发右侧表单变化
function invReagentRowClick({ row }: any) {
  if (isEmpty(row)) {
    clearInvReagentForm();
  } else {
    (proxy.$refs.invReagentTableRef as any).setCurrentRow(row);
    setInvReagentForm(row);
    if (activeName.value == 'second') {
      //labSuppAppRef.value.initPage(reagentForm.id);
    }
  }
}

function addInvReagentDialog() {
  clearInvReagentForm();
  if (!isEmpty(searchReaForm.categorizeId)) {
    reagentForm.categorizeId = searchReaForm.categorizeId;
    reagentForm.categorizeCode = searchReaForm.categorizeCode;
    reagentForm.categorizeName = searchReaForm.categorizeName;
    setCurOrgTreeNode(reagentForm.categorizeId);
  }

  reagentForm.seq = invReagentList.length + 1;
  (proxy.$refs.invReagentTableRef as any).clearCurrentRow();
  activeName.value = 'first';
}

function tabHandleClick(tab: any) {
  if (tab.props.name == 'second') {
    //labSuppAppRef.value.initPage(reagentForm.id);
  }
}

function saveInvReagent(formName: any) {
  let $el = proxy.$refs[formName];
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    if (reagentForm.id == null) {
      const url = '/lis/inv/invReagent/addInvReagent';
      const obj: any = {};
      Object.assign(obj, reagentForm);
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('新增成功', VxeNotifyType.success);
          clearInvReagentForm();
          sltInvReagent.value.id = res.data.id;
          findInvReagentList();
        })
        .catch((err: any) => {
          VxeMessage('新增失败', VxeNotifyType.error);
        });
    } else {
      const url = '/lis/inv/invReagent/editInvReagent';
      const obj: any = {};
      Object.assign(obj, reagentForm);
      proxy.$http
        .post(url, obj)
        .then((res: any) => {
          VxeMessage('修改成功', VxeNotifyType.success);
          setTimeout(() => {
            clearInvReagentForm();
            findInvReagentList();
          }, 50);
        })
        .catch((err: any) => {
          VxeMessage('修改失败', VxeNotifyType.success);
        });
    }
  });
}

function deleteInvReagent() {
  const sltQcMaterials = (proxy.$refs.invReagentTableRef as any).getCheckboxRecords();
  if (!(sltQcMaterials.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { invReagentList: sltQcMaterials };
        const url = '/lis/inv/invReagent/batchDeleteInvReagentList';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            findInvReagentList(); // 获取证书表格数据
            VxeMessage(res.status.msg, VxeNotifyType.success);
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}

function clearInvReagentForm() {
  reagentForm.id = null;
  reagentForm.categorizeId = '';
  reagentForm.categorizeCode = '';
  reagentForm.categorizeName = '';
  reagentForm.reaGroupNo = '';
  reagentForm.reaNo = '';
  reagentForm.reaNa = '';
  reagentForm.shortName = '';
  reagentForm.specModel = '';
  reagentForm.unit = '';
  reagentForm.dyncPrice = null;
  reagentForm.reaClassNo = '';
  reagentForm.reaCategoryNo = '';
  reagentForm.reacategoryNo1 = '';
  reagentForm.isBatchNumMgt = false;
  reagentForm.vendorNo = '';
  reagentForm.vendorName = '';
  reagentForm.manufacturerNo = '';
  reagentForm.manuName = '';
  reagentForm.isEnable = true;
  reagentForm.miniStock = null;
  reagentForm.miniStockWarning = null;
  reagentForm.safeStock = null;
  reagentForm.maxStock = null;
  reagentForm.stock = null;
  reagentForm.allowUseTimes = null;
  reagentForm.costPrice = null;
  reagentForm.inputCode = '';
  reagentForm.miniUnit = '';
  reagentForm.stockUnit = '';
  reagentForm.outUnit = '';
  reagentForm.useUnit = '';
  reagentForm.proUnit = '';
  reagentForm.unitRatio = null;
  reagentForm.proUnitRatio = null;
  reagentForm.stockUnitRatio = null;
  reagentForm.outUnitRatio = null;
  reagentForm.useUnitRatio = null;
  reagentForm.isPrintBarWhenIn = false;
  reagentForm.isBatchChangeTip = false;
  reagentForm.maxTemp = null;
  reagentForm.minTemp = null;
  reagentForm.stockCondition = '';
  reagentForm.barcode = '';
  reagentForm.isSingleBarcode = false;
  reagentForm.isManageUse = false;
  reagentForm.useExpirDay = null;
  reagentForm.expirDay = null;
  reagentForm.expir1Warning = null;
  reagentForm.expir2Warning = null;
  reagentForm.maxUse = null;
  reagentForm.isOutinRecord = false;
  reagentForm.certNo = '';
  reagentForm.certName = '';
  reagentForm.remark = '';
  reagentForm.bidNo = '';
  reagentForm.externalNo = '';
  reagentForm.maxOut = null;
  reagentForm.isSingle = false;
  reagentForm.savePos = '';
  reagentForm.matchCondition = '';
  reagentForm.seq = 1;
  const el: any = proxy.$refs['reagentFormRef'];
  //移除校验结果
  el.clearValidate();

  const treeName = 'orgTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
}

function setInvReagentForm(row: any) {
  Object.assign(reagentForm, row);
  setCurOrgTreeNode(reagentForm.categorizeId);
  const el: any = proxy.$refs['reagentFormRef'];
  //移除校验结果
  el.clearValidate();
  sltInvReagent.value = row;
}

// 光标定位在指定字典分类上
function setCurOrgTreeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'orgTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

function getBdsResult() {
  reagentForm.inputCode = funBdsJsResult('firstPinYinFun', reagentForm.shortName);
}

/**下拉选中行事件 */
function SelectRowClick(e) {
  e.aimKeys.forEach((r) => {
    reagentForm[r.aimKey] = e.row[r.rowKey];
  });
}

function handleTypeNodeClick(data: any) {
  reagentForm.categorizeId = data.id;
  reagentForm.categorizeCode = data.categorizeCode;
  reagentForm.categorizeName = data.categorizeName;
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
}
function handleSearCateClick(data: any) {
  searchReaForm.categorizeId = data.id;
  searchReaForm.categorizeCode = data.categorizeCode;
  searchReaForm.categorizeName = data.categorizeName;
  const selectOrgRef: any = proxy.$refs['selectSearCateRef'];
  selectOrgRef.blur();
  findInvReagentList();
}

function clearSearCate() {
  searchReaForm.categorizeId = '';
  searchReaForm.categorizeCode = '';
  searchReaForm.categorizeName = '';
  const treeName = 'searCateTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
  findInvReagentList();
}
function radioBatchNumMgtChange() {
  findInvReagentList();
}
function radioSingleBarcodeChange() {
  findInvReagentList();
}

function vendorNoChangeEvent() {
  findInvReagentList();
}
function isSingleChange() {
  findInvReagentList();
}
function miniUnitChangeEvent() {
  reagentForm.proUnit = reagentForm.miniUnit;
  reagentForm.stockUnit = reagentForm.miniUnit;
  reagentForm.outUnit = reagentForm.miniUnit;
}

function addDialog() {
  getCert();
  showDialog.value = true;
}

// 回车查询
function keyupInsrEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getCert();
  }
}

// 获取证书
const getCert = () => {
  lloading.value = true;
  certTableList.length = 0;
  const url = '/inv/cert/findInvCertList';
  proxy.$http
  .get(url, { params: { searchValue: searchForm.searchValue, pageIndex: page.currentPage, pageSize: page.pageSize } })
    .then((res: any) => {
      certTableList.push(...res.data);
      lloading.value = false;
    })
    .catch((err: any) => {
      lloading.value = false;
      VxeMessage('查询证书列表失败', VxeNotifyType.error);
    });
};

// 证书列表隐藏
function closeDialog() {
  searchForm.searchValue = '';
  showDialog.value = false;
}


function saveBacthInstr() {
  const selectRows = (proxy.$refs.certTableRef as any).getCheckboxRecords();
  if (selectRows.length > 0) {
    const addInstrList = [];
    const row = rptGroupTable.value?.getCurrentRecord();
    for (const sltRow of selectRows) {
      const addInstr = {
        id: sltRow.id,
        instrCode: sltRow.instrCode,
        instrName: sltRow.instrName,
        reportGroupId: rptGroupInfo.id,
        rptGroup: IsEmpty(row.rptGroup) ? null : row.rptGroup//rptGroupInfo.rptGroup
      };
      addInstrList.push(addInstr);
    }
    const data = { instrSetupList: addInstrList };
    const url = '/api/rptGroup/batchAddInstrList';
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        getInstrById(rptGroupInfo); // 获取证书表格数据
        VxeMessage(res.status.msg, VxeNotifyType.success);
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
  closeDialog();
}

function deleteInstr(row: any) {
  proxy
    .$confirm('确定删除此证书？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/rptGroup/deleteInstr';
      row.reportGroupId = '';
      proxy.$http.post(url, row).then((res: any) => {
        if (res.status.code === 1) {
          getInstrById(rptGroupInfo);
          VxeMessage('删除证书成功', VxeNotifyType.success);
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}

</script>

<style lang="scss" scoped>#invReagentDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }

    .button-red {
      margin: 5px 0 5px 5px;
    }

    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }

    .tableBox {
      height: calc(100% - 103px);
      background-color: $base-white;
    }

    .el-tabs {
      height: 100%;

      // 右侧保存按钮
      .saveBtn {
        margin: 0px 30px;
      }
    }

    .ratioTableClazz {
      text-align: center;
      width: 60%;
    }
  }
}</style>
